<template>
    <div class="wrapper mui-scroll-wrapper" style="background:#fff">
        <div class="mui-scroll ">
            <div class="userMsg">
                <CrossLine></CrossLine>
                <ul style="background:#fff;" class="mui-table-view mui-table-view-chevron clause">
                    <li class="mui-table-view-cell" @click="privateNorm" v-show="privateTitleStatus">
                        <a class="mui-navigate-right  mui-checkbox  mui-input-row mui-left">
                        <!-- <input name="checkbox" value="private" type="checkbox"> -->
                        <span>隐私信息保护规范</span>  
                        </a>
                    </li>
                    <div  class="rules privateWapper" v-show="privateStatus  && privateTitleStatus">
                        <div v-html="rulesData.privateNormText">
                            {{rulesData.privateNormText}}
                        </div>
                    </div>
                    <li class="mui-table-view-cell" @click="serviceAgreement" v-show="serviceTitleStatus">
                        <a class="mui-navigate-right  mui-checkbox  mui-input-row mui-left">
                        <!-- <input name="checkbox" value="service" type="checkbox"> -->
                        <span>开星选车电商平台服务协议</span>  
                        </a>
                    </li>
                    <div class="rules serviceWapper" v-show="serviceStatus && serviceTitleStatus ">
                        <div v-html="rulesData.serviceAgreementText">
                        {{rulesData.serviceAgreementText}}
                        </div>
                    </div>  
                </ul>  
                <!-- <p style="margin-left:15px;margin-top:10px;font-size:12px;color:#999999;">
                    <input class="serviceCheckBox" name="service" @change="changeCheckBox" v-model="serviceConfirmStatus" type="checkbox">
                    我已认真阅读该条款,并同意该条款
                </p> -->
                <!-- <button  type="button" class="bt mui-btn mui-btn-primary btn-center " style="height:40px;font-size:15px;" :class="confirm ? 'abled' : 'disabled'" @click.stop="goHome">同意</button>
                <p class="unAgree" @tap="goBack">不同意</p> -->
            </div>
        </div>
        <nav class="mui-bar mui-bar-tab footer" >
            <p style="margin-left:15px;margin-top:0px;padding-top:5px;font-size:12px;color:#999999;">
                <input class="serviceCheckBox" name="service" @change="changeCheckBox" v-model="serviceConfirmStatus" type="checkbox">
                我已认真阅读该条款,并同意该条款
            </p>
            <span style="width:50%;display:inline-block;text-align:center;margin-bottom:0px;line-height:35px;" @tap="goBack">不同意</span>
            <span style="width:50%;display:inline-block;text-align:center;background:#ff6a27;color:#fff;line-height:35px;" :class="confirm ? 'abled' : 'disabled'" @click.stop="goHome">同意</span>
        </nav>
    </div>
</template>

<script>
    import CrossLine from '@/components/base/cross-line/cross-line'
    import storage from '@/utils/localstorage'
    import mui from 'static/js/mui'
    import BScroll from 'better-scroll';
    export default {
        data() {
            return{
               privateStatus: true,
               serviceStatus: true,
               privateConfirmStatus: false,
               serviceConfirmStatus: false,
               privateTitleStatus: true,
               serviceTitleStatus: false,
               bidding: '',
               clause: '',
               confirm: false,
               rulesData:{
                   privateNormText: '',
                   serviceAgreementText: ''
               }
            }
        },
        components: {
            CrossLine
        },
        props: {},
        methods: {
            init() {
               this.rulesData.privateNormText = storage.getLocalstorage('configDoc')['个人隐私信息保护规范']
               this.rulesData.serviceAgreementText = storage.getLocalstorage('configDoc')['开星选车电商平台服务协议']
            },
            getParams() {
                //获取路由参数'
                let routeVal = this.$route.params
                if(JSON.stringify(routeVal)!=="{}"){
                    if(typeof(routeVal.adHas) !== 'undefined'){
                        this.$store.commit('AD_HAS',routeVal.adHas)
                    }
                }
            },
            goBack() {
                storage.removeLocalstorage('confirmClause')
                plus.runtime.quit();
            },
            privateNorm() {
               this.privateStatus = !this.privateStatus
            },
            serviceAgreement() {
               this.serviceStatus = !this.serviceStatus
            },
            goHome() {
                if(this.confirm){
                    if(this.privateTitleStatus == true){
                        this.privateTitleStatus = false
                        this.serviceTitleStatus = true
                        this.confirm = false
                        this.serviceConfirmStatus = false
                        this.$nextTick(function(){
                            new BScroll('.serviceWapper', {scrollY: true});
                        })
                        return 
                    }
                    if(this.serviceTitleStatus == true ){
                        this.$router.push('home')
                    }
                }else{
                   mui.alert('请确认隐私保护及服务条款','提示',['确定'],function(){},'div')
                }
            },
            changeCheckBox() {
            if (this.serviceConfirmStatus == true) {
                this.confirm = true;
            } else {
                this.confirm = false;
                }
            }
        },
        filters: {},
        computed: {},
        created() {
          this.init()
          this.getParams()
          //写入缓存
          localStorage.setItem('confirmClause','first');
        },
        mounted() {
            //竖向滚动
            mui('.mui-scroll-wrapper').scroll({
                scrollY: false, //是否竖向滚动
                scrollX: false, //是否横向滚动
                startX: 0, //初始化时滚动至x
                startY: 0, //初始化时滚动至y
                indicators: false, //是否显示滚动条
                deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
                bounce: false //是否启用回弹
            });
            new BScroll('.privateWapper', {scrollY: true});
        },
    };
</script>

<style lang="scss" scoped>
    .userpams{
        float:right;margin-right:20px;
        color:#999999;font-size:0.6rem;position:relative;top:1px;
    }
    .usertit{
        font-size:0.75rem;
        color:#333333;
    }
    
    .mui-table-view-cell:after {
        background-color: #E9E9E9;
    }
    .mui-navigate-right:after, .mui-push-left:after, .mui-push-right:after {
    font-family: Muiicons;
    font-size: inherit;
    line-height: 1;
    position: absolute;
    top: 40%;
    display: inline-block;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-decoration: none;
    color: #bbb;
    -webkit-font-smoothing: antialiased;
    transform: rotate(90deg);
    }
     /* 规则条款 */
    .rules{
        background: #f8f8f8;
        width: 100%;
        padding-top:10px;
        overflow:scroll;
        height:800px;
        padding-left:5%;
        padding-right:5%;
    }
    .rules p{
        font-size:12px;
        padding-left:0px;
        padding-bottom:10px;
        padding-top:10px;
        margin-bottom:0px;
        text-align: justify;
    }
    .rules div{
        padding-bottom:400px;
    }
    .mui-checkbox input[type="checkbox"] {
        position: absolute;
        top: 4px;
        right: 20px;
        display: inline-block;
        width: 28px;
        height: 26px;
        border: 0;
        outline: 0 !important;
        background-color: transparent;
        -webkit-appearance: none;
        margin-top: 7px;
    }

  .mui-checkbox input[type="checkbox"]:before {
    font-family: Muiicons;
    font-size: 28px;
    font-weight: normal;
    line-height: 1;
    text-decoration: none;
    color: #aaa;
    border-radius: 0;
    background: none;
    -webkit-font-smoothing: antialiased;
  }
  .mui-checkbox input[type="checkbox"]:checked:before {
    content: "\e442";
  }

  .mui-checkbox input[type="checkbox"]:checked:before {
    color: #ff6a27;
  }

  .mui-checkbox input[type="checkbox"]:before {
    font-family: Muiicons;
    font-size: 28px;
    font-weight: normal;
    line-height: 1;
    text-decoration: none;
    color: #aaa;
    border-radius: 0;
    background: none;
    -webkit-font-smoothing: antialiased;
  }

  .mui-checkbox span {
    font-size:15px!important;
  }

  .mui-radio.mui-left input[type="radio"],
  .mui-checkbox.mui-left input[type="checkbox"] {
    left: 14px;
  }
  .mui-navigate-right:after,
  .mui-push-left:after,
  .mui-push-right:after {
    top: 35% !important;
  }
  .mui-navigate-right:after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    font-size: 0.9rem;
  }
  
  /* 按钮 */
  .btn-center{
    position: relative;
    left: 4%;
    width:92%;
    margin-top:10px;
    /* top:15px; */
  }
  .abled {
    background-color: #ff6a27;
    color: #fff;
    border: 1px solid #ff6a27;
  }
  .disabled {
    background-color: #b2b2b2!important;
    color: #fff;
    border: 1px solid #b2b2b2!important;
   }
   .mui-btn-primary:enabled:active{
    background-color: #ff6a27;
    color: #fff;
    border: 1px solid #ff6a27;
   }
   .serviceCheckBox{
       position: relative;
       top:2px;
   }
   .unAgree{
       display: block;
       width:100%;
       padding-top:10px;
       font-size:15px;
       text-align: center;
       color:#999999;
   }
   .mui-bar-nav ~ .mui-content{
       padding-top: 0px; 
   }
   .mui-table-view-cell:after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 15px;
    height: 0px;
    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    background-color: #c8c7cc;
    }
    .wrapper{
        background:#f8f8f8!important;
    }
    .footer{
    background-color: #fff; 
    border-bottom: 0px solid #ddd;
    border-top: 1px solid #ddd;
    }
</style>